<template>
  <div id="app">
    <!-- 整体框架 -->
    <el-container class="container">
      <!-- 头部 -->
      <el-header>
        <router-link to="" @click.native="$router.go(-1)" v-show="true" class="el-icon-back"></router-link>
        <span>网易云音乐</span>
      </el-header>
      <!-- 中间框架 -->
      <el-container>
        <!-- 左边导航栏 -->
        <el-aside :style="{width: this.$store.state.fold ? '192px !important':'46px !important'}">
          <myaside></myaside>
        </el-aside>
        <!-- 右边内容 -->
        <el-main>
           <!-- 路由 -->
          <keep-alive>
            <router-view />
          </keep-alive>
        </el-main>
      </el-container>
      <!-- 底部播放器 -->
      <el-footer>
        <myfooter></myfooter>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import myaside from '@/components/aside.vue'  //引入左边导航栏组件
  import myfooter from '@/components/footer.vue' //引入底部播放器组件
  export default {
    name: 'App',
    data() {
      return {
          
      }
    },
    components: {
      myaside,
      myfooter
    }
  }
</script>

<style>

</style>
